<template>
  <div class="page-container-student">
    <!-- 搜索组件 -->
    <student-search
      :search-form="searchForm"
      @on-search="handleSearch"
      @on-add="showAddDialog"
      @reset="resetQuery"
    />

    <!-- 表格组件 -->
    <student-table
      :table-data="tableData"
      :gender-map="genderMap"
      :theme-color="themeColor"
      @on-view="handleView"
      @on-recharge="handleRecharge"
      @on-course-open="handleCourseOpen"
      @on-search="handleSearch"
      @reload="loadData"
    />

    <!-- 分页组件 -->
    <student-pagination
      :pagination="pagination"
      @on-size-change="handleSizeChange"
      @on-current-change="handleCurrentChange"
    />

    <!-- 对话框组件 -->
    <student-dialog
      :visible="dialogVisible"
      :title="dialogTitle"
      :form-data="formData"
      :is-view-mode="isViewMode"
      :is-edit-mode="isEditMode"
      :active-tab="activeTab"
      :theme-color="themeColor"
      @on-close="dialogVisible = false"
      @on-region-change="handleRegionChange"
      @reload="loadData"
    />
  </div>
</template>

<script>
import StudentSearch from './components/StudentSearch.vue'
import StudentTable from './components/StudentTable.vue'
import StudentPagination from './components/StudentPagination.vue'
import StudentDialog from './components/StudentDialog.vue'
import { queryPage } from '@/api/student'

export default {
  name: 'Index',
  components: {
    StudentSearch,
    StudentTable,
    StudentPagination,
    StudentDialog
  },
  data() {
    return {
      // 主题色
      themeColor: '#3399ff',
      // 性别映射
      genderMap: {
        0: '未知',
        1: '男',
        2: '女'
      },
      // 查询表单
      searchForm: {
        region: '',
        grade: '',
        gender: '',
        keyword: ''
      },
      // 表格数据
      tableData: [],
      // 分页信息
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      // 对话框显示状态
      dialogVisible: false,
      // 对话框标题
      dialogTitle: '',
      // 当前激活的标签页
      activeTab: 'base',
      // 表单数据
      formData: {
        id: null,
        name: '',
        phone: '',
        region: '',
        regionArray: [],
        grade: '',
        school: '',
        password: '123456',
        recommendCode: '',
        gender: 0,
        scoreChinese: null,
        scoreMath: null,
        scoreEnglish: null,
        scorePhysics: null,
        scoreChemistry: null,
        hobby: '',
        extraInfo: ''
      },
      // 是否为查看模式
      isViewMode: false,
      // 是否为编辑模式
      isEditMode: false
    }
  },
  created() {
    // 初始化加载数据
    this.loadData()
  },
  methods: {
    // 加载表格数据
    async loadData() {
      const res = await queryPage({
        page: { pageNum: this.pagination.currentPage, pageSize: this.pagination.pageSize },
        param: this.searchForm
      })

      this.tableData = res.records
      this.pagination.total = res.total * 1

      this.tableData.forEach(item => {
        item.avatar = process.env.VUE_APP_BASE_HOST + item.avatar
      })
    },

    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.loadData()
    },

    resetQuery() {
      this.searchForm = {
        region: '',
        grade: '',
        gender: '',
        keyword: ''
      }
      this.handleSearch()
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },

    // 显示新增对话框
    showAddDialog() {
      this.dialogTitle = '新增学生'
      this.isViewMode = false
      this.isEditMode = true
      // 重置表单
      this.resetForm()
      this.dialogVisible = true
    },

    // 查看学生信息
    handleView(row) {
      this.dialogTitle = '查看学生'
      this.isViewMode = true
      this.isEditMode = false
      // 填充表单数据
      this.fillFormData(row)
      this.dialogVisible = true
    },

    // 充值操作
    handleRecharge(row) {
      this.$message.info(`为学生 ${row.name} 进行充值操作`)
    },

    // 课程开通操作
    handleCourseOpen(row) {
      this.$message.info(`为学生 ${row.name} 开通课程`)
    },

    // 填充表单数据
    fillFormData(row) {
      // 深拷贝数据
      const formData = JSON.parse(JSON.stringify(row))

      // 处理地区级联数据
      if (formData.region) {
        const regionParts = formData.region.split('-')
        if (regionParts.length === 1) {
          formData.regionArray = [regionParts[0]]
        } else {
          formData.regionArray = [regionParts[0], formData.region]
        }
      } else {
        formData.regionArray = []
      }

      this.formData = formData
    },

    // 重置表单
    resetForm() {
      this.formData = {
        id: null,
        name: '',
        phone: '',
        region: '',
        regionArray: [],
        grade: '',
        school: '',
        password: '123456',
        recommendCode: '',
        gender: 0,
        scoreChinese: null,
        scoreMath: null,
        scoreEnglish: null,
        scorePhysics: null,
        scoreChemistry: null,
        hobby: '',
        extraInfo: ''
      }
    },

    // 处理地区级联变化
    handleRegionChange(value) {
      if (value && value.length > 0) {
        this.formData.region = value[value.length - 1]
      } else {
        this.formData.region = ''
      }
    }
  }
}
</script>

<style scoped>
.page-container-student {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 85px);
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
</style>
